<template>
  <div class="table-pro-layout">
    <el-container class="container-box">
      <div class="table-tools" v-if="showTools">
        <div class="tools-left">
          <slot name="tools"></slot>
        </div>
        <div class="tools-right">
          <el-button icon="Grid" @click="cloumnVisible = true"></el-button>
        </div>
      </div>
      <el-table
        ref="tablePro"
        class="table-pro"
        header-row-class-name="--biz_table_haed"
        v-bind="$attrs"
        :data="data"
        :border="true"
      >
        <template v-for="item in columns" :key="item">
          <el-table-column
            v-if="item.type && ['selection', 'index', 'expand'].includes(item.type)"
            v-bind="item"
            :reserve-selection="item.type == 'selection'"
          >
            <template v-if="item.type == 'expand'" #default="scope">
              <component :is="item.render" v-bind="scope" v-if="item.render"> </component>
              <slot v-else :name="item.type" v-bind="scope"></slot>
            </template>
          </el-table-column>
          <ColumnPro v-else-if="item.show" :columns="item">
            <template v-for="slot in Object.keys($slots)" #[slot]="scope">
              <slot :name="slot" v-bind="scope"></slot>
            </template>
          </ColumnPro>
        </template>
      </el-table>
      <div class="table-pagination" v-if="showPage"></div>
    </el-container>
    <el-dialog v-model="cloumnVisible" :title="$t('table.columnSetting')" width="900" :before-close="handleClose">
      <VueDraggable v-model="columns" target="tbody" :animation="150" handle=".move-handler" filter=".disabled">
        <el-table :data="columns" style="width: 100%; height: 400px" :border="true" :highlight-current-row="true">
          <el-table-column :label="$t('table.columnSort')" :width="55">
            <template #default="{ row }">
              <el-icon class="move-handler" :class="{ disabled: computedDisabled(row) }" size="large">
                <Rank />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="label" :label="$t('table.columnName')" :width="200" />
          <el-table-column prop="width" :label="$t('table.columnWidth')" :width="100">
            <template #default="{ row }">
              <el-input v-model="row.width" type="number" :min="40" :max="500" />
            </template>
          </el-table-column>
          <el-table-column prop="show" :label="$t('table.isShow')" :width="100">
            <template #default="{ row }">
              <el-switch
                v-model="row.show"
                :disabled="row.type === 'index' || row.type === 'selection'"
                :active-text="$t('table.yes')"
                :inactive-text="$t('table.no')"
                inline-prompt
              />
            </template>
          </el-table-column>
          <el-table-column prop="align" :label="$t('table.align')" :min-width="150">
            <template #default="{ row }">
              <el-select v-model="row.align" :placeholder="$t('table.select')">
                <el-option :label="$t('table.left')" value="left" />
                <el-option :label="$t('table.center')" value="center" />
                <el-option :label="$t('table.right')" value="right" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="fixed" :label="$t('table.fixed')" :min-width="150">
            <template #default="{ row }">
              <el-select v-model="row.fixed" :placeholder="$t('table.select')">
                <el-option :label="$t('table.leftFixed')" value="left" />
                <el-option :label="$t('table.rightFixed')" value="right" />
                <el-option :label="$t('table.noFixed')" value="false" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </VueDraggable>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cloumnVisible = false">{{ $t("table.cancel") }}</el-button>
          <el-button type="primary" @click="cloumnVisible = false"> {{ $t("table.ok") }} </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import type { TableProCloumn, TableProProps } from "@/typings";
import type { ElTable, TableInstance } from "element-plus";
import ColumnPro from "./ColumnPro.vue";
import { onUnmounted, ref, watch } from "vue";
import { VueDraggable } from "vue-draggable-plus";
defineOptions({
  name: "TablePro"
});
const columns = ref<TableProCloumn[]>([]);
const cloumnVisible = ref<boolean>(false);
const props = withDefaults(defineProps<TableProProps>(), {
  showTools: true,
  showPage: false
});
const tablePro = ref<TableInstance | undefined>();
const stopWatch = watch(
  () => props.columns,
  (newValue) => {
    newValue.forEach((item) => item.show ?? (item.show = true));
    columns.value = newValue;
  },
  {
    deep: true,
    immediate: true
  }
);

const computedDisabled = (row: TableProCloumn): boolean => {
  if (
    row.fixed === "left" ||
    row.fixed === "right" ||
    row.fixed === "true" ||
    row.fixed === true ||
    row.type === "index" ||
    row.type === "selection" ||
    row.type === "expand" ||
    row.type === "expand"
  )
    return true;
  return false;
};

const handleClose = (done: () => void) => {
  done();
};

defineExpose({
  tablePro
});

onUnmounted(() => {
  stopWatch && stopWatch();
});
</script>

<style scoped lang="scss">
.table-pro-layout {
  width: 100%;
  height: 100%;
  .container-box {
    width: 100%;
    height: 100%;
    flex-direction: column;
    .table-tools {
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
      .tools-left {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .tools-right {
        height: 100%;
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .table-pro {
      height: 100%;
      width: 100%;
      overflow: auto;
    }
    :deep(.--biz_table_haed) {
      .el-table__cell {
        background-color: var(--biz-table-header-bg-color) !important;
      }
    }
    .table-pagination {
      height: 46px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }
  }
}
</style>
